<template>
    <div class="box">
        <div class="header"><van-icon name="arrow-left" @click="$router.back" />帮助中心</div>
        <div class="text">
            <p style="text-align: right;">{{ question2 }}</p>
            <p style="text-align: left;">{{ answer }}</p>
        </div>
        <div class="question">
            <van-cell-group inset>
                <van-field v-model="question" label="你的问题" placeholder="请输入问题" />
            </van-cell-group>
            <van-button @click="submitQuestion">提交问题</van-button>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { ref } from "vue"
const question = ref("")
const question2 = ref("")
const answer = ref("")
const qaList = ref([
    { question: '你是谁', answer: '我是你的小助手，你可以叫我小助手，或者叫我小助手也可以' },
    { question: '代码', answer: '没有，能不能自己写啊，你这么懒，我都不想回答你了' },
    { question: '0', answer: '😠😡🤬😷🤒🤕🤢🤮' },
    { question: '1', answer: '😀😁😂🤣😃😄😅😆' },
    { question: '2', answer: '😉😊😋😎😍😘🥰😗' },
    { question: '3', answer: '😙😚☺🙂🤗🤩🤔🤨' },
    { question: '4', answer: '😐😑😶🙄😏😣😥😮' },
    { question: '5', answer: '🤐😯😪😫🥱😴😌😛' },
    { question: '6', answer: '😜😝🤤😒😓😔😕🙃' },
    { question: '7', answer: '🤑😲☹🙁😖😞😟😤' },
    { question: '8', answer: '😢😭😦😧😨😩🤯😬' },
    { question: '9', answer: '😰😱🥵🥶😳🤪😵🥴' },
])
function submitQuestion() {
    if (qaList.value.filter(item => item.question === question.value).length === 0) {
        question2.value = question.value
        question.value = ""
        return answer.value = '小助手暂时无法回答你的问题，你可以尝试搜索其他相关问题'
    }
    answer.value = (qaList.value.filter(item => item.question === question.value)[0]).answer
    question2.value = question.value
    question.value = ""
}
</script>
<style lang="scss" setup>
.header {
    .van-icon {
        position: fixed;
        left: 10px;
        top: 15px;
        font-size: 20px;
    }
}

.van-button {
    border: none;
    background-color: #4bc4b1;
    border-color: #4bc4b1;
    border-radius: 20px;
    color: #fff;
    width: 100%;
}

.question {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.header {
    .van-icon {
        position: fixed;
        left: 10px;
        top: 15px;
        font-size: 20px;
    }
}
.text {
    padding: 0 10px;
}
</style>